<template>
	<view>
		<view class="top">
			<navigator url="/pages/zwj/yuyuechenggong/yuyuechenggong">
				<image class="back" src="/static/images/白色左箭头.png" mode=""></image>
			</navigator>
			<view class="title">预约成功</view>
		</view>
		<!-- 核销码 -->
		<view style="margin-top: -200rpx;">
			<uni-card>
				<view class="hxmView">
					<view>核销码：{{ hexiaoCode }}</view>
					<view>
						<image :src="qrCodeUrl" mode=""></image>
					</view>
				</view>
			</uni-card>
		</view>

		<!-- 维修信息 -->
		<view>
			<uni-card>
				<view class="wxView">
					<view>维修信息</view>
					<u-line margin="20rpx 0rpx 30rpx 0rpx"></u-line>
					<view class="wxItem">
						<view>维修单号:</view>
						<view>{{ orderInfo.repairId }}</view>
					</view>
					<view class="wxItem">
						<view>维修状态:</view>
						<view>{{ statusText }}</view>
					</view>
					<view class="wxItem">
						<view>车主姓名:</view>
						<view>{{ userInfo.userName }}</view>
					</view>
					<view class="wxItem">
						<view>联系方式:</view>
						<view>{{ userInfo.phone }}</view>
					</view>
					<view class="wxItem">
						<view>维修方式:</view>
						<view>{{ repairWayText }}</view>
					</view>
					<view class="wxItem">
						<view>取车位置:</view>
						<view>{{ orderInfo.location }}</view>
					</view>
					<view class="wxItem">
						<view>预约日期:</view>
						<view>{{ orderInfo.repairTime }}</view>
					</view>
					<view class="wxItem">
						<view>提交日期:</view>
						<view>{{ orderInfo.reservationTime }}</view>
					</view>

				</view>
			</uni-card>
		</view>

		<!-- 车辆信息 -->
		<view>
			<uni-card>
				<view class="wxView">
					<view>车辆信息</view>
					<u-line margin="20rpx 0rpx 30rpx 0rpx"></u-line>
					<view class="wxItem">
						<view>车辆类型:</view>
						<view>{{ carTypeText }}</view>
					</view>
					<view class="wxItem">
						<view>车牌号:</view>
						<view>{{ carInfo.carNum }}</view>
					</view>
					<view class="imgView">
						<view>整车照片:</view>
						<view>
							<image :src="orderInfo.vehiclePhotos" mode=""></image>
						</view>
					</view>
					<view class="imgView">
						<view>维修部位照片:</view>
						<view>
							<image :src="orderInfo.repairPhotos" mode=""></image>
						</view>
					</view>

				</view>
			</uni-card>
		</view>
	</view>
</template>

<script>
	import request from '../../../uitls/request';
	export default {
		data() {
			return {
				orderInfo: {},
				userId: '',
				carId: '',
				userInfo: {},
				carInfo: {},
				carBrand: '',
				hexiaoCode: '', // 新增
				qrCodeUrl: '' // 新增
			}
		},
		methods: {
			getUserInfo() {
				request({
					url: '/bigbase/info/' + this.userId,
					method: 'GET',
					success: (res) => {
						console.log(res)
						this.userInfo = res.data.data
					}
				})
			},
			getCarInfo() {
				request({
					url: '/bigbase/carInfo/' + this.carId,
					method: 'GET',
					success: (res) => {
						console.log(res)
						this.carInfo = res.data.data
					}
				})
			},
			generateHexiaoCode() {
				const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
				let code = '';
				for (let i = 0; i < 8; i++) {
					code += chars.charAt(Math.floor(Math.random() * chars.length));
				}
				return code;
			}
		},
		onLoad() {
			this.orderInfo = uni.getStorageSync('reservationData')
			console.log(this.orderInfo)
			this.userId = this.orderInfo.userId;
			this.carId = this.orderInfo.carInfoId;
			this.carBrand = this.orderInfo.carBrand
			this.getUserInfo();
			this.getCarInfo();

			// 生成核销码并生成二维码链接
			this.hexiaoCode = this.generateHexiaoCode();
			this.qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${this.hexiaoCode}`;
		},
		computed: {
			// 维修状态映射
			statusText() {
				const statusMap = {
					0: '已预约',
					1: '进行中',
					2: '已完成'
				};
				return statusMap[this.orderInfo.status] || '未知状态';
			},
			// 维修方式映射
			repairWayText() {
				const wayMap = {
					0: '上门维修',
					1: '到店维修'
				};
				return wayMap[this.orderInfo.repairWay] || '未知方式';
			},
			carTypeText() {
				const typeMap = {
					1: '奥迪',
					2: '红旗',
					4: '大众',
					5: '比亚迪'
				};
				return typeMap[this.carBrand] || '未知品牌';
			}
		}
	}
</script>

<style scoped>
	/* 背景图片 */
	.top {
		width: 100%;
		padding-bottom: 120px;
		background: url(../../../static/images/组 8.png);
		background-repeat: no-repeat;
		background-size: cover;
	}

	.top .back {
		position: absolute;
		margin-left: 20px;
		margin-top: 30px;
		width: 15px;
		height: 15px;
		z-index: 2;
	}

	.top .title {
		text-align: center;
		font-size: 18px;
		color: #fff;
		line-height: 44px;
		/* 根据实际需要调整 */
		padding-top: 20px;
	}

	/* 核销码 */
	.hxmView {
		width: 400rpx;
		height: 280rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		margin-left: auto;
		margin-right: auto;
	}

	.hxmView>view:nth-child(1) {
		font-weight: bold;
	}

	image {
		width: 180rpx;
		height: 180rpx;
	}

	/* 维修信息 */
	.wxView>view:nth-child(1) {
		font-size: 36rpx;
		font-weight: bold;
	}

	.wxItem {
		height: 50rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.wxItem>view:nth-child(1) {
		font-size: 25rpx;
		font-weight: bold;
	}

	.wxItem>view:nth-child(2) {
		font-size: 25rpx;
		color: gray;
	}

	/* 车辆信息 */
	.imgView>view>image {
		width: 250rpx;
		height: 250rpx;
	}

	.imgView>view:nth-child(1) {
		font-size: 25rpx;
		font-weight: bold;
	}
</style>